<template>
  <div class="user-center">
    <el-card class="user-center-card">
      <div class="register">
          <h2 style="text-align: center">更新个人信息</h2>
          <el-form ref="userInfoForm" :model="userInfoForm" :rules="userInfoFormRules"  label-position="left" label-width="120px" class="register-form">
            <el-form-item label="用户名" prop="userName">
              <el-input
                  v-model="userInfoForm.userName"
                  type="text"
                  auto-complete="off"
                  placeholder="用户名"
                  prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item prop="cardType" label="证件类型">
              <el-select v-model="userInfoForm.cardType" disabled placeholder="请选择证件类型">
                <el-option value="0" label="身份证"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="idNumber" label="证件号">
              <el-input
                  type="text"
                  placeholder="请输入证件号"
                  v-model="userInfoForm.idNumber"
                  :disabled="true"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="注册时间">
              {{userInfoForm.registerTime}}
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                  type="text"
                  placeholder="请输入邮箱"
                  v-model="userInfoForm.mail"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="住址">
              <el-input
                  type="text"
                  placeholder="请输入住址"
                  v-model="userInfoForm.address"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="name" label="真实姓名">
              <el-input
                  type="text"
                  placeholder="请输入你的真实姓名"
                  :disabled="true"
                  v-model="userInfoForm.name"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="phone" label="手机号码">
              <el-input
                  type="text"
                  placeholder="请输入手机号码"
                  v-model="userInfoForm.phone"
              ></el-input>
            </el-form-item>

            <el-form-item prop="loginPwd" label="新的登录密码">
              <el-input
                  type="password"
                  placeholder="用户密码长度必须介于 8 和 16 之间"
                  v-model="userInfoForm.loginPwd"
                  show-password
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="confirmLoginPwd" label="确认登录密码">
              <el-input
                  type="password"
                  placeholder="与上面的密码一致"
                  v-model="userInfoForm.confirmLoginPwd"
                  show-password
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="payPwd" label="支付密码">
              <el-input
                  type="password"
                  placeholder="支付密码长度6位"
                  v-model="userInfoForm.payPwd"
                  show-password
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="confirmPayPwd" label="确认支付密码">
              <el-input
                  type="password"
                  placeholder="与上面的密码一致"
                  v-model="userInfoForm.confirmPayPwd"
                  show-password
              >
              </el-input>
            </el-form-item>
          </el-form>

      </div>
      <div class="btn-g">
        <el-button class="update-button" type="primary" @click="updateUserInfoBtn" round>保存</el-button>
        <el-button class="delete-button" type="danger" @click="deleteUser" round>销户</el-button>
      </div>

    </el-card>

  </div>
</template>

<script>
import {cancelAccount, getUserInfo, updateUserInfo} from "@/api/user";
import {isMobile} from "@/utils/validate";

export default {
  name: "index",
  data(){
    const equalToLoginPassword = (rule, value, callback) => {
      if (this.userInfoForm.loginPwd !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    const equalToPayPassword = (rule, value, callback) => {
      if (this.userInfoForm.payPwd !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    let validatePhone = (rule,value,callback)=>{
      if (!value){
        callback(new Error('手机号不能为空'));
      }
      //使用正则表达式进行验证手机号码
      if (!isMobile(value)){
        callback(new Error('请输入正确的手机号码'));
      }
      //自定义校验规则 需要调用callback()函数！
      callback();
    };
    return{
      userInfoForm:{
        userId: '',
        userName: '',
        cardType: '',
        idNumber: '',
        mail:'',
        address: '',
        name: '',
        phone: '',
        registerTime: '',
        loginPwd: '',
        confirmLoginPwd:'',
        payPwd: '',
        confirmPayPwd:''
      },
      userInfoFormRules:{
        userName:[
          { required: true, trigger: "blur", message: "请输入用户名" }
        ],
        phone: [
          {required: true, trigger: "blur",validator:validatePhone}
        ],
        loginPwd:[
          { required: true, trigger: "blur", message: "请输入您的密码" },
          { min: 8, max: 16, message: '用户密码长度必须介于 8 和 16 之间', trigger: 'blur' }
        ],
        confirmLoginPwd: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToLoginPassword, trigger: "blur" }
        ],
        payPwd: [
          { required: true, trigger: "blur", message: "请输入您的支付密码" },
          { min: 6, max: 6, message: '支付密码的长度位6位', trigger: 'blur' }
        ],
        confirmPayPwd: [
          { required: true, trigger: "blur", message: "请再次输入您的支付密码" },
          { required: true, validator: equalToPayPassword, trigger: "blur" }
        ],
        cardType:[
          { required: true, message: '请选择证件类型', trigger: 'change' }
        ],
        idNumber:[
          { required: true, trigger: "blur", message: "请输入您的证件号码" },
        ],
        name:[
          { required: true, trigger: "blur", message: "请输入您的姓名" }
        ],
      }
    }
  },
  created() {
    this.printUserInfo();
  },
  methods:{
    updateUserInfoBtn(){
      this.$refs.userInfoForm.validate(valid=>{
        if(valid){
          this.$confirm("确定修改你的信息吗？","修改个人信息",{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(()=>{
            const req={
              userId: this.userInfoForm.userId,
              userName: this.userInfoForm.userName,
              cardType: this.userInfoForm.cardType,
              idNumber: this.userInfoForm.idNumber,
              mail:this.userInfoForm.mail,
              address: this.userInfoForm.address,
              name: this.userInfoForm.name,
              phone: this.userInfoForm.phone,
              loginPwd: this.userInfoForm.loginPwd,
              payPwd:this.userInfoForm.payPwd
            }
            updateUserInfo(req).then(res=>{
              this.$message.success("修改成功请重新登录");
              this.$store.dispatch('Logout').then(()=>{
                this.$router.push('login')
              })
            })
          })
        }
      })
    },
    //获取用户信息
    printUserInfo(){
      const userId = this.$store.state.user.userInfo.userId;
      getUserInfo(userId).then(res=>{
        console.log(res)
          this.userInfoForm.userId = res.content.userId
          this.userInfoForm.userName = res.content.userName
          this.userInfoForm.cardType = res.content.cardType.toString();
          this.userInfoForm.idNumber = res.content.idNumber
          this.userInfoForm.mail = res.content.mail
          this.userInfoForm.address = res.content.address
          this.userInfoForm.name = res.content.name
          this.userInfoForm.phone = res.content.phone
          this.userInfoForm.registerTime = this.$moment(res.content.registerTime).format("lll") ;
      })
    },

    //销户
    deleteUser(){
      const userId = this.$store.state.user.userInfo.userId;
      this.$confirm('此操作将永久删除您的用户信息, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        cancelAccount(userId).then(res=>{
          this.$message({
            type: 'success',
            message: res.content
          });
          this.$router.push("/login")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
.user-center{
  /*text-align: center;*/
}
.btn-g{
  margin: 0 auto;
  width: 50%;
}
.user-center-card{
  width: 80%;
  margin: 20px auto;
}
.update-button{
  /*float: left;*/
}
.delete-button{
  float: right;
}
</style>
